 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Aurasium Apk Wrapper</title>
	<link rel="stylesheet" href="{{STATIC_URL}}css/ui-lightness/jquery-ui-1.8.16.custom.css"  type="text/css" media="screen" charset="utf-8" />
     <script type="text/javascript" src="{{STATIC_URL}}js/jquery-1.6.2.min.js"></script>
     <script type="text/javascript" src="{{STATIC_URL}}js/jquery-ui-1.8.16.custom.min.js"></script>

 </head>
 <body>
   <script>
   // Create jQuery UI tab structure.
	$(document).ready(function() {   
	    $('#maintab').tabs({ 
	    	fx: { height: 'toggle', opacity: 'toggle' }
	    });
	    $('#maintab').bind('tabsselect', function(event, ui) {
	    	 if (ui.index == 1) 
	    	 	download_tab_reset(ui);
	    });
	    
	    $('#maintab').tabs('select', '#{{ page_name }}');
	    
	    $( "input:submit, button, file").button();
	    
	    {% if message %}
	    	show_dialog("{{message}}");
		{% endif%}
			    	
	    {% if apk_id %}
	    $("#upload_result").show();
	    {% endif %}
	    
	    {% if retrieve_apk_id %}
	    retrieve_download("{{retrieve_apk_id}}");
	    {% endif %}
	});  
	
	// Show default code entry panel
	function download_tab_reset(ui) {
		$("#DownloadCodeEntryPane").show();
		$("#DownloadNotReadyPane").hide();
		$("#DownloadReadyPane").hide();
		if (retrieving)
			retrieve_download(retrieving);
	};
	
	var retrieving = "";
	function retrieve_download(code) {
		document.getElementById('apk_id').value = code;
		$("#DownloadCodeEntryPane").hide();
		$("#DownloadNotReadyPane").show("fast");
		
		if (retrieving == code)
			return;
		retrieving = code;

		function polling_download_state() {
			$.ajax({     
				url: "/info/" + code,     
				dataType: 'json',     
				contentType: 'application/json',
				error: function(xhr_data) {       
					show_dialog('Apk id "' + code + '"cannot be found, please try again.'); 
					retrieving = "";
					download_tab_reset();
				},     
				success: function(xhr_data) {
					if (xhr_data.status == 'pending') {
				       	setTimeout(polling_download_state, 10000);    
				       	$("#DNRPaneStatus").effect("highlight", {}, 2000);  
					} else {
						show_download_pane(xhr_data);
					}     
				}
		   });
 		}
 		polling_download_state();
	}
	
	function show_download_pane(json_data) {
		$("#DownloadNotReadyPane").hide();
		$("#DownloadReadyPane").show("fast");

		if (json_data.status == 'failed')
		{
			$("#DownloadInfoPane").html("An internal error occurs while processing your apk. We are working on it as fast as possible. Please come back later and check it again.");
		}
		else
		{
			$("#DownloadInfoPane").html("<a href='"+ json_data.url +"'>" + json_data.filename + "</a>");
		}
	}
	
	function show_message(msg) {
		$("#dialog").html(msg);
		$("#dialog").dialog({
			buttons: {}
		});
	}
	
	function show_dialog(msg) {
		$("#dialog").html(msg);
		$("#dialog").dialog({
			modal: true,
			buttons: {
				Ok: function() {
					$( this ).dialog( "close" );
				}
			}
		});
	}
	
	function uploading_file() {
		show_message('Uploading... Please wait.<img src="{{STATIC_URL}}img/ajax-loader.gif">');
	}
   </script>

	<div id="dialog" title="Message" style="display:none"></div>
<!-- reference:
http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/   
-->
	<div id="maintab" class="widget ui-tabs">
		<ul class="tabnav">
			<li><a href="#upload">Submit</a></li>
			<li><a href="#download">Retrieve</a></li>
			<li><a href="#faq">FAQ</a></li>
			<li><a href="#about">About</a></li>
		</ul>
<!-------------- Upload Tab ---------------------------------------------->
		<div id="upload" class="tabdiv ui-tabs-nav ui-tabs-hide">
			<div id="upload_form" >
			    <form action="/send" id="basic-upload-form" onsubmit="javascript: uploading_file();" method="post" enctype="multipart/form-data">
			    	{% csrf_token %}
			    	
			    	<div>
			    	let Aurasium sanitise and make Android Apps trustworthy. 
			    	</div>
			    	<p>
			    	<label>Choose APK file:</label>
			        <input id="id_file" type="file" name="file"/>
			        <p>
			        <input id="btnUpload" type="submit" value="Upload file"/>
			    </form>
			</div>
			
			<div id="upload_result" style="display:none">
			Upload successful.
			<p>
			Your apk's ID is: <a href="{{next_url}}"><b>{{ apk_id}}</b></a>
			<p>
			
			</div> 
		</div>
<!-------------- Download Tab --------------------------------------------->
    	<div id="download" class="tabdiv ui-tabs-panel ui-tabs-hide">
    		<div id="AppIDEntryPane">
    		Please enter the apk's id:
    		<p>
    		<label>Apk ID:</label>
    		<input id="apk_id" type="text"/>
    		<button id="submit_code" onclick="javascript:retrieve_download(document.getElementById('apk_id').value );">Retrieve</button>
    		</div>
    		<div id="DownloadNotReadyPane" style="border: 1px solid #DDDDDD;">
    			<div id="DNRPaneStatus">The app is queueing up for processing..</div><p>
    			<img src="{{STATIC_URL}}img/ajax-loaderbar.gif"><p>
    			You can continue waiting at this page (which automatically refreshes)
    			or come back later.
    		</div>

    		<div id="DownloadReadyPane">
    			Here you go:<p>
    			<div id="DownloadInfoPane" style="border: 1px solid #DDDDDD;"></div>
    		</div>
    	</div>
<!-------------- Faq Tab -------------------------------------------------->
    	<div id="faq" class="tabdiv ui-tabs-panel ui-tabs-hide">
    		Todo.<p>
    	</div>
<!-------------- About Tab ------------------------------------------------->
    	<div id="about" class="tabdiv ui-tabs-panel ui-tabs-hide">
    		Todo: rx201<p>
    	</div>
   	</div>
  </body>
 </html>


